<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录/注册</title>
    <script src="../assets/js/vue.min.js"></script>
    <script src="../assets/js/axios.min.js"></script>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="../assets/css/login.css">
</head>
<body>
    <div id="app">
        <form ref="form" :model="form" label-width="80px" :rules="rules" class="sign-in-form">
            <div :class="[divClass]">
                <div :class="['login', loginhidden]">
                    <h2 class="title">登录</h2>
                    <div class="input-field">
                        <input type="text" placeholder="账号" v-model="form.account">
                    </div>
                    <div class="input-field">
                        <input type="password" placeholder="密码" v-model="form.password">
                    </div>
                    <input type="submit" value="Login" class="btn solid" @click="login($event)">
                </div>
                <div :class="['register', registerhidden]">
                    <h2 class="title">注册</h2>
                    <div class="input-field" style="background-color: #AAA;">
                        <input type="text" placeholder="账号(自动获取)" v-model="registerform.account" disabled>
                    </div>
                    <div class="input-field e_mail">
                        <input type="email" placeholder="邮箱" v-model="registerform.email">
                        <!-- <button type="button" class="getCaptcha btn" @click = "getcaptcha">获取验证码</button> -->
                    </div>
                    <!-- <div class="input-field">
                        <input type="text" placeholder="验证码" v-model="registerform.captcha">
                    </div> -->
                    <div class="input-field">
                        <input type="password" placeholder="密码" v-model="registerform.password">
                    </div>
                    <div class="input-field">
                        <input type="text" placeholder="姓名" v-model="registerform.name">
                    </div>
                    <div class="input-field">
                        <input type="number" placeholder="身份证号" v-model="registerform.idcard">
                    </div>
                    <div class="input-field">
                        <input type="text" placeholder="身份" list="identity" v-model="identity" @focus="clearInput" ref="identityInput">
                        <datalist id="identity">
                            <option value="项目经理">
                            <option value="项目成员">
                            <option value="普通用户">
                        </datalist>
                    </div>
                    <div class="input-field">
                        <input type="text" placeholder="昵称" v-model="registerform.nickname">
                    </div>
                    <input type="submit" class="btn" value="Register" @click="register($event)">
                </div>
            </div>
        </form>
        <div :class="['round', roundClass]">
            <!-- <div :class="['go_register', reghidden]">
                <p>还未拥有账号？点击下方注册</p>
                <button @click="switchClass(1)">去注册</button>
            </div>
            <div :class="['go_login', loghidden]">
                <p>已有账号？点击下方登录</p>
                <button @click="switchClass(2)">去登录</button>
            </div> -->
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                form:{
                    account:"",
                    password:'',
                },
                registerform:{
                    account:'',//账号
                    password:'',//密码
                    email:'',//邮箱
                    // captcha:'',//验证码
                    name:'',//名字
                    identity:'',//身份
                    idcard:'',//身份证号
                    nickname:''//昵称
                },
                roundClass: 'round_left',
                divClass:'right',
                loginhidden:'',
                registerhidden:'hidden',
                reghidden:'',
                loghidden:'righthidden',
                identity:'',
                rules: {
                    
                }
            }
        },
        created(){

        },
        methods:{
            login(event) {
                event.preventDefault();
                let params = new URLSearchParams();
                params.append('account', this.form.account);
                params.append('password', this.form.password);
                axios.post("http://localhost:8081/admin/adminlogin", params)
                .then((res) => {
                    if(res.data == "登录成功"){
                        //登录成功
                        this.$message.success("登录成功")
                        setTimeout(() => {
                        //打开主页
                            window.location.href = './index.html'; 
                            this.form.account = ''
                            this.form.password = ''
                        }, 750);
                    }else{
                        //登录失败
                        this.$message.error("登录失败")
                    }
                })
                .catch((error) => {
                    this.$message.error("登录失败")
                });
            },
            clearInput() {
                this.identity = '';
            },
            // getcaptcha(){
            //     axios.defaults.headers['Accept'] = '*';
            //     axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
            //     axios.post("http://localhost:8080/task_war_exploded/user/checkcaptcha", this.registerform)
            //     .then((res) => {
            //         const message = res.data.message;
            //         const success = res.data.success;
            //         if(success){
            //             //验证无此邮箱
            //             alert("请留意您的邮箱")
            //             axios.defaults.headers['Accept'] = '*';
            //             axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
            //             axios.get("http://localhost:8080/task_war_exploded/user/sendcaptcha")
            //         }else{
            //             //数据库存在邮箱
            //             alert(message);
            //         }
            //     })
            //     .catch((error) => {
            //         alert("服务器内部错误，请稍后再试");
            //     });
            // },
            register(event){
                event.preventDefault();
                axios.defaults.headers['Accept'] = '*';
                axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
                axios.post("http://localhost:8080/task_war_exploded/user/checkcaptcha", this.registerform)
                .then((res) => {
                    const message = res.data.message;
                    const success = res.data.success;
                    if(success){
                        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                        if (!emailPattern.test(this.registerform.email)) {
                            this.$message.error('请输入有效的邮箱地址');
                            return
                        }
                        //验证无此邮箱
                        if(this.identity ==="项目经理"){
                            this.registerform.identity = 1
                        }
                        if(this.identity ==="项目成员"){
                            this.registerform.identity = 2
                        }
                        if(this.identity ==="普通用户"){
                            this.registerform.identity = 3
                        }
                        if (!this.registerform.password || !this.registerform.email || !this.registerform.name || !this.registerform.identity || !this.registerform.idcard || !this.registerform.nickname) {
                            this.$message.error("所有字段都不能为空！")
                        } else {
                            // 提交表单或其他逻辑
                            let email = this.registerform.email;
                            let username = email.match(/^(.+)@/)[1];  // 匹配 '@' 前的所有字符
                            this.registerform.account = username
                            axios.defaults.headers['Accept'] = '*';
                            axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
                            axios.post("http://localhost:8080/task_war_exploded/user/register", this.registerform)
                            .then((res) => {
                                const message = res.data.message;
                                const success = res.data.success;
                                if(success){
                                    //注册成功
                                    this.$message.success(message)
                                }else{
                                    //注册失败
                                    this.$message.error(message)
                                }
                            })
                            .catch((error) => {
                                alert("服务器内部错误，请稍后再试");
                            });
                        }
                    }else{
                        //数据库存在邮箱
                        this.$message.error(message)
                    }
                })
                .catch((error) => {
                    alert("服务器内部错误，请稍后再试");
                    console.log(error)
                });
            },
            switchClass(value){
                if(value === 1){
                    this.divClass = 'left'
                    this.roundClass = 'round_right'
                    setTimeout(() => {
                        //类名切换
                        this.reghidden = 'righthidden'
                        this.loghidden = ''
                        this.loginhidden = 'hidden'
                        this.registerhidden =''
                        //清空表单输入值
                        this.form.account = ''
                        this.form.password = ''
                    }, 750);
                }
                if(value === 2){
                    this.divClass = 'right'
                    this.roundClass = 'round_left'
                    setTimeout(() => {
                        //类名切换
                        this.reghidden = ''
                        this.loghidden = 'lefthidden'
                        this.loginhidden = ''
                        this.registerhidden ='hidden'
                        //清空表单输入值
                        this.registerform.account = ''
                        this.registerform.email = ''
                        this.registerform.captcha = ''
                        this.registerform.password = ''
                        this.registerform.name = ''
                        this.registerform.identity = ''
                        this.identity = '';
                        this.registerform.idcard = ''
                        this.registerform.nickname = ''
                    }, 750);
                }
            }
        }
    })
</script>
</html>